<template>
    <div class="eachartsWrap">
        <Bar ref="child" v-if="type == 'bar'" :type="type" :data="data" :setting="setting"></Bar>
        <Areas ref="child" v-else-if="type == 'category'" :type="type" :data="data" :setting="setting"></Areas>
    </div>
</template>
<script>
import Bar from './Bar.vue';
import Areas from './Areas.vue';
import { onResizeChang } from '@/common/js/common';
export default {
    name: 'Echarts',
    components: {
        Bar,
        Areas,
    },
    props: {
        type: {
            type: String,
        },
        setting: {
            type: Object,
            default: () => { }
        },
        url: {
            type: String,
            default: '',
        },
        dataList: {
            type: [Object, Array],
            default: () => []
        }
    },
    data() {
        return {
            data: [],
        }
    },
    methods: {
        getData() {
            this.getAxios(`${this.$}${this.url}`, {}).then((res) => {
                if (res.code == 200) {
                    this.data = res.data;
                }
            }).finally(() => {
            });
        },
        onResizeChange() {
            let childRef = this.$refs.child;
            childRef.onResizeChange();
        }
    },
    created() {
        // 监听屏幕改变的话就调用
        onResizeChang('start', this.onResizeChange)
    },
    mounted() {
        if (this.url && this.url != '') {
            this.getData();
        }
    },
    watch: {
        dataList(nVal, oVal) {
            if (Array.isArray(nVal)) {
                this.data = nVal;
            }
        }
    },
    // 销毁
    beforeDestroy() {
        onResizeChang('end', this.onResizeChange)
    }
}
</script>
<style lang="less" scoped>
.eachartsWrap {
    width: 100%;
    height: 100%;
}
</style>